<template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="工人长：" prop="user_leader_id" >
        <el-input v-model="ruleForm.user_leader_id"  placeholder="工人长编号"/>
      </el-form-item>
      <el-form-item label="大组长：" prop="user_manager_id">
        <el-input v-model="ruleForm.user_manager_id"  placeholder="大组长编号"/>
      </el-form-item>
      <el-form-item label="工人名：" prop="name">
        <el-input v-model="ruleForm.name"  placeholder=""/>
      </el-form-item>
      <el-form-item label="备注信息：" prop="note">
        <el-input v-model="ruleForm.note"  placeholder="" type="textarea"/>
      </el-form-item>
      <el-form-item label="工人成员：" prop="group_user_id">
        <!-- <el-input v-model="ruleForm.group_user_id"  placeholder=""/> -->
      <template #default="scope">
        <el-button   plain @click="dialogTableVisible1= true" >
          点击添加
        </el-button>
      </template>
    </el-form-item>
    </el-form>
      <el-dialog  title="添加成员" width="800" v-model="dialogTableVisible1">
        <div>
        <el-card class="filter-container" shadow="never">
          
          <div style="margin-top: 30px; " >
            <el-form style="display: inline-block;" >
              <div style="display: inline-block;margin-left:40px">
              <el-form-item label="搜索添加：">
                <el-input :prefix-icon="Search" class="input-width" placeholder="成员名/手机号"></el-input>
              </el-form-item>
          </div>
          <div style="display: inline-block;margin-left: 8px;">
            <el-button type="primary" size="small">确定</el-button>
          </div>
          </el-form>
        </div>
        </el-card>
       </div>
      </el-dialog>
      <el-button type="primary" style="margin-left: 25%;">提交</el-button>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
  import { Search } from '@element-plus/icons-vue'
  
  const dialogTableVisible1 = ref(false)
  
  interface RuleForm {
    user_leader_id: string
    user_manager_id: string
    name: string
    note: string
    group_user_id: string
  }
  
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive<RuleForm>({
    user_leader_id: '',
    user_manager_id: '',
    name: '',
    note: '',
    group_user_id: '',
  })
  
  const locationOptions = ['Home', 'Company', 'School']
  
  const rules = reactive<FormRules<RuleForm>>({
    name: [
      { required: true, message: 'Please input Activity name', trigger: 'blur' },
      { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
   user_leader_id: [
      {
        //true添加星号
        required: true,
        message: 'Please select Activity zone',
        trigger: 'change',
      },
    ],
    user_manager_id: [
      {
        //required: true,
        message: 'Please select Activity count',
        trigger: 'change',
      },
    ],
    group_user_id: [
      {
        type: 'date',
        required: true,
        message: 'Please pick a date',
        trigger: 'change',
      },
    ],
    note: [
      {
        type: 'date',
        required: true,
        message: 'Please pick a time',
        trigger: 'change',
      },
    ],
  })
  
  
  </script>